<template>
  <div class="proposition-plan-container">
    <div>课程命题计划</div>
    <div class="my-form">
      <div class="my-form-item">
        <div class="my-form-item-label">课程名称</div>
        <div class="my-form-item-content">
          <div>{{ tablelist.coursename }}</div>
        </div>
      </div>
      <div class="my-form-item">
        <div class="my-form-item-label">开课教研室</div>
        <div class="my-form-item-content">
          <div>{{ tablelist.classroom }}</div>
          <div>课程负责人</div>
          <div>{{ tablelist.courseper }}</div>
        </div>
      </div>
      <div class="my-form-item">
        <div class="my-form-item-label">考试方式</div>
        <div class="my-form-item-content">
          <div>
            <el-checkbox-group v-model="tablelist.assmethod" max="1">
              <el-checkbox label="笔试闭卷"></el-checkbox>
              <el-checkbox label="笔试开卷"></el-checkbox>
              <el-checkbox label="口试"></el-checkbox>
              <el-checkbox label="机试"></el-checkbox>
            </el-checkbox-group>
          </div>
          <div>课程性质</div>
          <el-checkbox-group v-model="tablelist.coursetype" max="1">
            <el-checkbox label="必修课"></el-checkbox>
            <el-checkbox label="选修课"></el-checkbox>
          </el-checkbox-group>
        </div>
      </div>
      <div class="my-form-item">
        <div class="my-form-item-label">命题方式</div>
        <div class="my-form-item-content">
          <div>
            <el-checkbox-group v-model="tablelist.mingti" max="1">
              <el-checkbox label="指定教员命题"></el-checkbox>
              <el-checkbox label="试题试卷库"></el-checkbox>
              <el-checkbox label="其他"></el-checkbox>
            </el-checkbox-group>

            <el-input
              style="width: 366px"
              size="mini"
              v-model="qitamingti"
              v-if="tablelist.mingti[0]==='其他'"
            ></el-input>


          </div>
        </div>
      </div>
      <div class="my-form-item">
        <div class="my-form-item-label">上课人数</div>
        <div class="my-form-item-content">
          <div>
            <span class="name">{{ tablelist.attclassno }}</span>
          </div>
          <div>试卷份数</div>
          <div>
            <el-input
              style="width: 63px"
              size="mini"
              v-model="tablelist.shijuanno"
            ></el-input>
          </div>
          <div>考试时长</div>
          <div>
            <el-input
              style="width: 63px"
              size="mini"
              v-model="tablelist.kstime"
            ></el-input>
            <span>分钟</span>
          </div>
        </div>
      </div>
      <div class="my-form-item">
        <div class="my-form-item-label">命题人</div>
        <div class="my-form-item-content">
          <div class="cz-block" @click="showYprDialogClick('命题人')">
            <div v-if="mingtiper" class="name-button">
              <span>{{ mingtiper }}</span>
            </div>
            <div v-else class="xz-button">
              <buton>选 择</buton>
            </div>
          </div>
          <div>审题人</div>
          <div class="cz-block" @click="showYprDialogClick('审题人')">
            <div v-if="shentino" class="name-button">
              <span>{{ shentino }}</span>
            </div>
            <div v-else class="xz-button">
              <buton>选 择</buton>
            </div>
          </div>
          <div>评阅人</div>
          <div class="cz-block" @click="showYprDialogClick('评阅人')">
            <div v-if="pingyueper" class="name-button">
              <span>{{ pingyueper }}</span>
            </div>
            <div v-else class="xz-button">
              <buton>选 择</buton>
            </div>

          </div>
        </div>
      </div>
      <div class="my-form-item">
        <div class="my-form-item-label">题目类型及分数分布</div>
        <div class="my-form-item-content">
          <el-row>
            <el-col :span="12">A卷</el-col>
            <el-col :span="12">B卷</el-col>
          </el-row>
          <el-row v-for="(item,index) in tablelist.atobpapersa">
            <el-col :span="12">
              <span>{{ index + 1 }}.</span>
              <el-input
                style="width: 291px"
                size="mini"
                v-model="item.questiontype"
              ></el-input>
              <span>题，占</span>
              <el-input
                style="width: 45px ;"
                size="mini"
                v-model="item.proportion"
              ></el-input>
              <span>%</span>
            </el-col>
            <el-col :span="12">
              <span>{{ index + 1 }}</span>
              <el-input
                style="width: 291px; "
                size="mini"
                v-model="tablelist.atobpapersb[index].questiontype"
              ></el-input>
              <span>题，占</span>
              <el-input
                style="width: 45px"
                size="mini"
                v-model="tablelist.atobpapersb[index].proportion"
              ></el-input>
              <span>%</span>
            </el-col>

          </el-row>
        </div>
      </div>
      <div class="my-form-item">
        <div class="my-form-item-label">命题说明</div>
        <div class="my-form-item-content">
          <div>
            <el-input
              type="textarea"
              style="width: 634px"
              :rows="3"
              v-model="tablelist.mingtidatails"
            ></el-input>
          </div>
        </div>
      </div>
      <div class="my-form-item">
        <div class="my-form-item-label">审题人意见</div>
        <div class="my-form-item-content">
          <div>
            <div>
              <el-checkbox v-model="tablelist.opinions.quantity">试题数量及格式无误</el-checkbox>
              <div>
                <span>试题泄密：</span>
                <el-checkbox-group v-model="tablelist.opinions.secret" max="1">
                  <el-checkbox label="是"></el-checkbox>
                  <el-checkbox label="否"></el-checkbox>
                </el-checkbox-group>
              </div>
            </div>
            <div>
              <el-checkbox v-model="tablelist.opinions.content">试题内容无误</el-checkbox>
              <div>
                <span>试用试卷：</span>
                <el-checkbox-group v-model="tablelist.opinions.ab" max="1">
                  <el-checkbox label="A卷"></el-checkbox>
                  <el-checkbox label="B卷"></el-checkbox>
                </el-checkbox-group>
              </div>
            </div>
            <div>
              <el-checkbox v-model="tablelist.opinions.score">试题分值无误</el-checkbox>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="button-group">
      <div @click="tablelistClick">保存</div>
    </div>

    <el-dialog :title="title" :visible.sync="showYprDialog" width="983px">
      <div class="choose-ypr-container">
        <div class="choose-ypr-search-container">
          <span class="title">部门：</span>
          <el-select
            v-model="dw"
            style="width: 100px; margin-right: 30px"
            size="mini"
            placeholder="请选择"
          >
            <el-option
              v-for="item in dwList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
          <el-input
            style="width: 152px; margin-right: 20px"
            size="mini"
            v-model="courseYpr"
            placeholder="关键字搜索"
          >
            <i slot="prefix" class="el-input__icon el-icon-search"></i>
          </el-input>
          <div class="search-button">
            <img src="../../../assets/assessment/icon-search.png" alt=""/>
            <span @click="showYprClick">查询</span>
          </div>
          <div class="button-list">
            <div
              class="button-item"
              v-for="(item, index) in searchNameList"
              :key="index"
              @click="delTag(index)"
            >
              <img
                class="del-icon"
                src="../../../assets/assessment/approval-del.png"
                alt=""
              />
              <div>{{ item }}</div>
            </div>
          </div>
        </div>
        <div class="choose-ypr-table-container">
          <el-table
            ref="multipleTable"
            :data="yjnameList"
            border
            style="width: 100%"
            class="table-data"
            row-class-name="row-class"
            cell-class-name="cell-class"
            header-row-class-name="header-row-class"
            header-cell-class-name="header-cell-class"
            @selection-change="handleSelectionChange"
          >
            <el-table-column
              prop=""
              label="选择"
              width="154"
              type="selection"
              align="center"
              class-name=""
              label-class-name=""
            >
            </el-table-column>
            <el-table-column
              prop="name"
              label="姓名"
              width="153"
              align="center"
            >
            </el-table-column>
            <el-table-column prop="sex" label="性别" width="154" align="center">
            </el-table-column>
            <el-table-column
              prop="unit"
              label="单位"
              width="153"
              align="center"
            >
            </el-table-column>
            <el-table-column prop="job" label="职务" align="center">
            </el-table-column>
          </el-table>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <button class="green" @click="showYprDialogclosure()">确 定</button>
      </span>
    </el-dialog>
  </div>
</template>

<script>

import {getSelectById, getSubmit} from "@/api/propositionReview/propositionPlan";
import {getSelectJob, getUpdate} from "@/api/propositionReview/approval";

export default {
  name: "propositionPlan",
  data() {
    return {
      qitamingti: '',
      searchNameList: [],
      yjnameList: [],
      tablelist: {
        "assmethod": [],
        "mingti": [],
        "coursetype": [],
        "atobpapers": [],
        "id": "",
        "xueqi": "",
        "coursename": "",
        "classroom": "",

        "attclassno": "",
        "mingtiper": "",
        "courseper": "",

        "shijuanno": "",
        "shentino": "",
        "kstime": "",
        "pingyueper": "",
        "typea": "",
        "atobpapersa": [
          {
            "id": "",
            "questiontype": "",
            "proportion": "",
            "papertype": "A",

          },
          {
            "id": "",
            "questiontype": "",
            "proportion": "",
            "papertype": "A",

          },
          {
            "id": "",
            "questiontype": "",
            "proportion": "",
            "papertype": "A",

          },
          {
            "id": "",
            "questiontype": "",
            "proportion": "",
            "papertype": "A",

          },
          {
            "id": "",
            "questiontype": "",
            "proportion": "",
            "papertype": "A",

          },
          {
            "id": "",
            "questiontype": "",
            "proportion": "",
            "papertype": "A",

          }
        ],
        "typeb": "1",
        "atobpapersb": [
          {
            "id": "",
            "questiontype": "",
            "proportion": "",
            "papertype": "B",

          },
          {
            "id": "",
            "questiontype": "",
            "proportion": "",
            "papertype": "B",

          },
          {
            "id": "",
            "questiontype": "",
            "proportion": "",
            "papertype": "B",

          },
          {
            "id": "",
            "questiontype": "",
            "proportion": "",
            "papertype": "B",

          },
          {
            "id": "",
            "questiontype": "",
            "proportion": "",
            "papertype": "B",

          },
          {
            "id": "",
            "questiontype": "",
            "proportion": "",
            "papertype": "B",

          }
        ],

        "mingtidatails": "",
        "yijianid": "1",
        "opinions": {
          ab: [],
          secret: [],
          content: '',
          extime: '',
          id: "",
          quantity: ' ',
          reviewer: '',
          score: '',
        },
        "createTime": ""
      },
      showYprDialog: false,
      checkList: [],
      value_textarea: "",
      title: '',
      namelist: {},
      handleSelection: [],
      mingtiper: '',
      pingyueper: '',
      shentino: '',
      dw: "计算机教研室",
      dwList: [
        {
          value: "计算机教研室",
          label: "计算机教研室",
        },
        {
          value: "作战教研室",
          label: "作战教研室",
        },
      ],
    }
      ;
  },
  mounted() {
    this.getSelectById(this.$route.query.id);
  },
  methods: {
    showYprClick() {
      let obj = {
        unit: this.dw,
        name: this.courseYpr
      }
      return new Promise(() => {
        getSelectJob(obj).then(res => {
          // console.log(res.data, 'res')
          this.yjnameList = res.data
        })
      })
    },
    handleSelectionChange(val) {
      this.handleSelection.splice(0, this.handleSelection.length);
      this.searchNameList.splice(0, this.searchNameList.length);
      this.handleSelection = val
      for (const valKey in val) {
        this.searchNameList[valKey] = val[valKey].name
      }
    },
    showYprDialogclosure() {
      this.showYprDialog = false
      let arr = []

      console.log(this.handleSelection, 'this.handleSelection')
      for (const Key in this.handleSelection) {
        arr[Key] = this.handleSelection[Key].id
      }
      let str = arr.join(",");
      let obj = {
        id: this.$route.query.id
      }
      if (this.namelist.type === '命题人') {
        obj.mtname = str
      } else if (this.namelist.type === '评阅人') {
        obj.yjname = str
      } else if (this.namelist.type === '审题人') {
        obj.stname = str
      }
      this.getUpdate(obj)


    },
    getUpdate: function (obj) {
      let el = this
      return new Promise(() => {
        getUpdate(obj).then(res => {
          el.getSelectById(this.$route.query.id);
          console.log(res.data, 'res')
        })
      })
    },
    showYprDialogClick(type) {
      this.showYprDialog = true
      this.namelist.type = type
      this.title = '选择' + type
      let arr = []
      if (this.namelist.type === '命题人') {
        arr = this.tablelist.mtList
      } else if (this.namelist.type === '评阅人') {
        arr = this.tablelist.pjList
      } else if (this.namelist.type === '审题人') {
        arr = this.tablelist.stList
      }

      console.log(arr)

      this.getSelectJob(arr)
    },
    tablelistClick() {
      let obj = {
        opinions: {}
      }
      let atobpapersa = this.tablelist.atobpapersa
      let arra = []
      let percentage = 0
      for (let i = 0; i < atobpapersa.length; i++) {
        percentage = parseInt(atobpapersa[i].proportion) + percentage;
        arra.push(atobpapersa[i].questiontype)
      }
      let aa = this.arrayCnt(arra)

      if (aa) {
        this.$message({
          showClose: true,
          message: aa + "重复",
          type: "error",
        })
        return
      }
      if (percentage == 100) {
        obj.atobpapersa = this.tablelist.atobpapersa
      } else {
        this.$message({
          showClose: true,
          message: "A卷百分数不等于100%",
          type: "error",
        })
        return
      }
      let atobpapersb = this.tablelist.atobpapersb
      let percentage1 = 0
      let arrb = []
      for (let i = 0; i < atobpapersb.length; i++) {
        percentage1 = parseInt(atobpapersb[i].proportion) + percentage1
        arrb.push(atobpapersb[i].questiontype)
      }
      let bb = this.arrayCnt(arrb) //查询是否重复
      console.log(bb)
      if (bb) {
        this.$message({
          showClose: true,
          message: bb + "重复",
          type: "error",
        })
        return
      }
      if (percentage1 == 100) {
        obj.atobpapersb = this.tablelist.atobpapersb
      } else {
        this.$message({
          showClose: true,
          message: "B卷百分数不等于100%",
          type: "error",
        })
        return
      }
      obj.attclassno = this.tablelist.attclassno
      obj.classroom = this.tablelist.classroom
      obj.coursename = this.tablelist.coursename

      obj.courseper = this.tablelist.courseper
      obj.createTime = ''
      obj.id = this.tablelist.id
      obj.kstime = this.tablelist.kstime

      obj.mingtidatails = this.tablelist.mingtidatails


      obj.mingtiper = this.tablelist.mingtiper
      obj.pingyueper = this.tablelist.mingtiper
      obj.shentino = this.tablelist.shentino

      obj.shijuanno = this.tablelist.shijuanno
      obj.typea = this.tablelist.typea
      obj.typeb = this.tablelist.typeb
      obj.xueqi = this.tablelist.xueqi
      obj.yijianid = this.tablelist.yijianid
      obj.opinions.content = this.tablelist.opinions.content
      obj.opinions.quantity = this.tablelist.opinions.quantity
      obj.opinions.reviewer = this.tablelist.opinions.reviewer
      obj.opinions.score = this.tablelist.opinions.score
      obj.opinions.id = this.tablelist.opinions.id
      if (this.tablelist.assmethod.length) {
        obj.assmethod = this.tablelist.assmethod[0]
      } else {
        this.$message({
          showClose: true,
          message: "考试方式不能为空",
          type: "error",
        })
        return
      }
      if (this.tablelist.mingti.length) {
        if (this.tablelist.mingti[0] === '指定教员命题' || this.tablelist.mingti[0] === '试题试卷库') {
          obj.mingti = this.tablelist.mingti[0]
        } else {
          obj.mingti = this.qitamingti
        }

      } else {
        this.$message({
          showClose: true,
          message: "命题方式不能为空",
          type: "error",
        })
        return
      }
      if (this.tablelist.opinions.ab.length) {
        obj.opinions.ab = this.tablelist.opinions.ab[0]
      } else {
        this.$message({
          showClose: true,
          message: "试题泄密不能为空",
          type: "error",
        })
        return
      }

      if (this.tablelist.opinions.secret.length) {
        obj.opinions.secret = this.tablelist.opinions.secret[0]
      } else {
        this.$message({
          showClose: true,
          message: "试用试卷不能为空",
          type: "error",
        })
        return
      }
      if (this.tablelist.coursetype.length) {
        obj.coursetype = this.tablelist.coursetype[0]
      } else {
        this.$message({
          showClose: true,
          message: "课程性质不能为空",
          type: "error",
        })
        return
      }


      this.getSubmit(obj)
    },
    arrayCnt: function (arr) {
      var newArr = [];
      for (var i = 0; i < arr.length; i++) {
        if (newArr.indexOf(arr[i]) == -1) {
          newArr.push(arr[i])
        }
      }
      var newarr2 = new Array(newArr.length);
      for (var t = 0; t < newarr2.length; t++) {
        newarr2[t] = 0;
      }
      for (var p = 0; p < newArr.length; p++) {
        for (var j = 0; j < arr.length; j++) {
          if (newArr[p] == arr[j]) {
            newarr2[p]++;
          }
        }

      }
      for (var m = 0; m < newArr.length; m++) {
        if (+newarr2[m] >= 2) {
          return newArr[m]
        }

      }

    },
    getSubmit: function (obj) {
      let el = this
      return new Promise(() => {
        getSubmit(obj).then(res => {
          console.log(res)

          if (+res.status === 200) {
            this.getSelectById(this.$route.query.id)
            this.$message({
              showClose: true,
              message: "保存成功",
              type: "success",
            });
            this.$router.push({
              path: '/teacher/propositionReview/approval',
            })
          } else {
            this.$message({
              showClose: true,
              message: "保存失败，请重新点击",
              type: "error",
            });
          }
        })
      })
    },
    getSelectJob: function (rows) {
      let obj = {}
      let el = this

      return new Promise(() => {
        getSelectJob(obj).then(res => {
          // console.log(res.data, 'res')
          this.yjnameList = res.data
          if (rows) {
            el.$nextTick(() => {
              rows.forEach(row => {
                el.$refs.multipleTable.toggleRowSelection(
                  el.yjnameList.find(item => {
                      return row.id == item.id;
                    }
                  ), true);
              });
            })
          }

        })
      })
    },
    getSelectById: function (obj) {
      let el = this
      if (obj) {
        return new Promise(() => {
          getSelectById(obj).then(res => {
            let data = res.data.data
            // this.tablelist=data
            console.log(data)


            this.tablelist.attclassno = data.attclassno
            this.tablelist.classroom = data.classroom
            this.tablelist.coursename = data.coursename

            this.tablelist.courseper = data.courseper

            this.tablelist.createTime = ''
            this.tablelist.id = data.id
            this.tablelist.kstime = data.kstime

            this.tablelist.mingtidatails = data.mingtidatails


            this.tablelist.mingtiper = data.mingtiper
            this.tablelist.pingyueper = data.mingtiper
            this.tablelist.shentino = data.shentino

            this.tablelist.shijuanno = data.shijuanno
            this.tablelist.typea = data.typea
            this.tablelist.typeb = data.typeb
            this.tablelist.xueqi = data.xueqi
            this.tablelist.yijianid = data.yijianid


            this.tablelist.opinions.content = data.opinions.content
            this.tablelist.opinions.quantity = data.opinions.quantity
            this.tablelist.opinions.reviewer = data.opinions.reviewer
            this.tablelist.opinions.score = data.opinions.score
            this.tablelist.opinions.id = data.opinions.id


            this.tablelist.mtList = data.mtList
            this.tablelist.pjList = data.pjList
            this.tablelist.stList = data.stList

            if (data.atobpapersa.length) {
              this.tablelist.atobpapersa = data.atobpapersa
            }
            if (data.atobpapersb.length) {
              this.tablelist.atobpapersb = data.atobpapersb
            }
            if (data.mtList.length) {
              this.mingtiper = data.mtList[0].name
            } else {
              this.mingtiper = ''
            }
            if (data.pjList.length) {
              this.pingyueper = data.pjList[0].name
            } else {
              this.pingyueper = ''
            }
            if (data.stList.length) {
              this.shentino = data.stList[0].name
            } else {
              this.shentino = ''
            }


            if (data.opinions.ab) {
              this.tablelist.opinions.ab.push(data.opinions.ab)
            }
            if (data.opinions.secret) {
              this.tablelist.opinions.secret.push(data.opinions.secret)
            }

            if (data.coursetype.length) {
              this.tablelist.coursetype.push(data.coursetype)
            }
            if (data.assmethod.length) {
              this.tablelist.assmethod.push(data.assmethod)
            }
            if (data.mingti === '指定教员命题' || data.mingti === '试题试卷库') {
              this.tablelist.mingti.push(data.mingti)
            } else if (data.mingti) {
              this.qitamingti = data.mingti
              this.tablelist.mingti.push('其他')
            }
            console.log(this.tablelist)
            // this.tablelist=res.data.data

          })
        })
      }

    },
    delTag(index) {
      let el = this
      console.log(this.$refs.multipleTable, 'multipleTable')
      // this.$refs.multipleTable.clearSelection(this.searchNameList[index]);
      this.searchNameList.splice(index, 1);
      el.$nextTick(() => {
        el.$refs.multipleTable.toggleRowSelection(
          el.yjnameList.find(item => {
              return this.handleSelection[index].id == item.id;
            }
          ), false);

      })
    },
  },
};
</script>
<style lang="less" scoped>
.choose-ypr-container {
  width: 767px;
  margin: 0px auto;

  .choose-ypr-search-container {
    .el-input--prefix .el-input__inner {
      padding-left: 30px;
    }

    .el-input__inner {
      &::placeholder {
        color: #b8b8b8;
      }

      &::-webkit-input-placeholder {
        /* WebKit browsers 适配谷歌 */
        color: #b8b8b8;
      }

      &:-moz-placeholder {
        /* Mozilla Firefox 4 to 18 适配火狐 */
        color: #b8b8b8;
      }

      &::-moz-placeholder {
        /* Mozilla Firefox 19+ 适配火狐 */
        color: #b8b8b8;
      }

      &:-ms-input-placeholder {
        /* Internet Explorer 10+  适配ie*/
        color: #b8b8b8;
      }
    }

    display: flex;
    flex-direction: row;
    align-items: center;

    .title {
      font-size: 18px;
      font-family: Microsoft YaHei;
      font-weight: bold;
      line-height: 20px;
      color: #004ca7;
      margin-right: 5px;
    }

    .search-button {
      width: 77px;
      height: 28px;
      line-height: 28px;
      background: #f1f8fe;
      border: 1px solid #51aef6;
      border-radius: 6px;
      cursor: pointer;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;

      > span {
        font-size: 16px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #51aef6;
      }

      > img {
        width: 20px;
        height: 20px;
        margin-right: 4px;
      }
    }

    .button-list {
      display: flex;
      flex-direction: row;
      align-items: center;
      margin-left: 21px;

      .button-item {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        position: relative;
        width: 69px;
        height: 27px;
        line-height: 27px;
        border: 1px solid #004ca7;
        border-radius: 4px;
        margin-right: 10px;
        text-align: center;
        font-size: 14px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #004ca7;

        .del-icon {
          position: absolute;
          right: 0px;
          top: 0px;
          width: 12px;
          height: 12px;
          padding: 2px;
        }
      }
    }
  }

  .choose-ypr-table-container {
    margin-top: 30px;

    .el-table td,
    .el-table th.is-leaf,
    .el-table--border,
    .el-table--group {
      border-color: #c7d7eb;
    }

    .el-table__header tr,
    .el-table__header th {
      padding: 0;
      height: 57px;
      background-color: #edf2f9;
      font-size: 16px;
      font-family: Microsoft YaHei;
      font-weight: bold;
      line-height: 20px;
      color: #004ca7;
    }

    .el-table__body tr,
    .el-table__body td {
      padding: 0;
      height: 51px;
    }

    .table-data {
      width: 100%;
      border: 0.8px solid #004ca7;
      border-radius: 9px;
      font-size: 14px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #004ca7;
    }
  }
}
</style>
<style scoped lang="less">
.proposition-plan-container {
  > div {
    &:nth-child(1) {
      width: 1740px;
      margin: 27px auto 20px;
      font-size: 20px;
      font-weight: bold;
      line-height: 20px;
      color: #004ca7;
      text-align: center;
    }
  }

  .my-form {
    width: 1740px;
    height: 744px;
    border: 1px solid rgba(0, 76, 167, 0.8);
    margin: 0 auto 13px;

    .my-form-item {
      border-bottom: 1px solid rgba(0, 76, 167, 0.39);

      > div {
        display: table-cell;
        min-height: 54px;
        vertical-align: middle;
      }

      .my-form-item-label {
        border-right: 1px solid rgba(0, 76, 167, 0.39);
        font-size: 16px;
        font-weight: bold;
        color: #004ca7;
        background: rgba(77, 129, 192, 0.1);
        width: 283px;
        text-align: center;
      }

      .my-form-item-content {
        width: 1456px;
        font-size: 14px;
        padding-left: 21px;
        color: #004ca7;

        .name {
          text-decoration: underline;
          cursor: pointer;

          &:hover {
            color: #187ef8;
            font-weight: bold;
          }
        }

        /deep/ .el-input__inner {
          text-align: center;
        }
      }

      .cz-block {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
      }

      .xz-button {
        text-align: center;
        width: 51px;
        background: #edf2f9;
        border: 1px solid #004ca7;
        color: #004ca7;
      }

      .name-button {
        font-size: 14px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        line-height: 25px;
        color: #004ca7;
        text-decoration: underline;
      }

      .name-button:hover {
        font-size: 14px;
        font-family: Microsoft YaHei;
        font-weight: bold;
        line-height: 25px;
        color: #187ef8;
      }

      &:nth-child(1) {
        .my-form-item-content {
          height: 49px;
          padding-left: 48px;
        }
      }

      &:nth-child(2) {
        .my-form-item-content {
          > div {
            display: inline-block;
            height: 49px;
            padding-top: 15px;
            vertical-align: middle;

            &:nth-child(1) {
              width: 564px;
              padding-left: 27px;
            }

            &:nth-child(2) {
              width: 195px;
              border-left: 1px solid rgba(77, 129, 192, 0.1);
              border-right: 1px solid rgba(77, 129, 192, 0.1);
              text-align: center;
              font-size: 16px;
              font-weight: bold;
              line-height: 20px;
              color: #004ca7;
              background: rgba(77, 129, 192, 0.1);
            }

            &:nth-child(3) {
              width: 670px;
              padding-left: 48px;
            }
          }
        }
      }

      &:nth-child(3) {
        .my-form-item-content {
          > div {
            display: inline-block;
            height: 49px;
            padding-top: 15px;
            vertical-align: middle;

            &:nth-child(1) {
              width: 564px;
            }

            &:nth-child(2) {
              width: 195px;
              border-left: 1px solid rgba(77, 129, 192, 0.1);
              border-right: 1px solid rgba(77, 129, 192, 0.1);
              text-align: center;
              font-size: 16px;
              font-weight: bold;
              line-height: 20px;
              color: #004ca7;
              background: rgba(77, 129, 192, 0.1);
            }

            &:nth-child(3) {
              width: 670px;
              padding-left: 48px;
            }
          }
        }
      }

      &:nth-child(4) {
        .my-form-item-content {
          height: 49px;

          > div {
            > div {
              display: inline-block;
            }
          }
        }
      }

      &:nth-child(5) {
        .my-form-item-content {
          > div {
            display: inline-block;
            height: 49px;
            padding-top: 15px;
            vertical-align: middle;

            &:nth-child(1) {
              width: 408px;
              padding-left: 27px;
            }

            &:nth-child(2) {
              width: 195px;
              border-left: 1px solid rgba(77, 129, 192, 0.1);
              border-right: 1px solid rgba(77, 129, 192, 0.1);
              text-align: center;
              font-size: 16px;
              font-weight: bold;
              line-height: 20px;
              color: #004ca7;
              background: rgba(77, 129, 192, 0.1);
            }

            &:nth-child(3) {
              width: 339px;
              padding-top: 8px;
              padding-left: 20px;
            }

            &:nth-child(4) {
              width: 195px;
              border-left: 1px solid rgba(77, 129, 192, 0.1);
              border-right: 1px solid rgba(77, 129, 192, 0.1);
              text-align: center;
              font-size: 16px;
              font-weight: bold;
              line-height: 20px;
              color: #004ca7;
              background: rgba(77, 129, 192, 0.1);
            }

            &:nth-child(5) {
              padding-top: 8px;
              padding-left: 20px;

              > span {
                margin-left: 7px;
              }
            }
          }
        }
      }

      &:nth-child(6) {
        .my-form-item-content {
          > div {
            display: inline-block;
            height: 49px;
            padding-top: 15px;
            vertical-align: middle;

            &:nth-child(1) {
              width: 408px;
              padding-left: 27px;
            }

            &:nth-child(2) {
              width: 195px;
              border-left: 1px solid rgba(77, 129, 192, 0.1);
              border-right: 1px solid rgba(77, 129, 192, 0.1);
              text-align: center;
              font-size: 16px;
              font-weight: bold;
              line-height: 20px;
              color: #004ca7;
              background: rgba(77, 129, 192, 0.1);
            }

            &:nth-child(3) {
              width: 339px;
              padding-left: 20px;
              padding-top: 12px;

              > span {
                height: 27px;
                background: #edf2f9;
                border: 1px solid rgba(0, 76, 167, 1);
                font-size: 14px;
                color: rgba(0, 76, 167, 1);
                border-radius: 4px;
                display: inline-block;
                padding: 2px 10px;
              }
            }

            &:nth-child(4) {
              width: 195px;
              border-left: 1px solid rgba(77, 129, 192, 0.1);
              border-right: 1px solid rgba(77, 129, 192, 0.1);
              text-align: center;
              font-size: 16px;
              font-weight: bold;
              line-height: 20px;
              color: #004ca7;
              background: rgba(77, 129, 192, 0.1);
            }

            &:nth-child(5) {
              padding-left: 20px;
            }
          }
        }
      }

      &:nth-child(7) {
        .my-form-item-content {
          padding-left: 0;

          > div {
            height: 37px;
            border-bottom: 1px solid rgba(77, 129, 192, 0.1);

            &:last-child {
              border-bottom: none;
            }

            &:first-child {
              text-align: center;
              font-weight: bold;
              line-height: 28px;
            }

            > div {
              padding-top: 4px;
              padding-left: 51px;
              height: 37px;

              > span {
                &:nth-child(1) {
                  margin-right: 8px;
                }

                &:nth-child(3) {
                  margin: 0 8px;
                }

                &:nth-child(5) {
                  margin-left: 8px;
                }
              }

              &:nth-child(2n + 1) {
                border-right: 1px solid rgba(77, 129, 192, 0.1);
              }
            }
          }
        }
      }

      &:nth-child(8) {
        .my-form-item-content {
          height: 110px;
          padding: 6px 0 6px 51px;
        }
      }

      &:nth-child(9) {
        border-bottom: none;

        .my-form-item-content {
          > div {
            padding-top: 2px;

            > div {
              margin-bottom: 2px;

              > label {
                width: 187px;
              }

              > div {
                > span {
                  margin-right: 30px;
                }

                &:nth-child(2) {
                  display: inline-block;

                  > div {
                    > label {
                      width: 89px;
                    }

                    display: inline-block;
                  }
                }
              }

              &:nth-child(1) {
              }

              &:nth-child(2) {
              }

              &:nth-child(3) {
              }
            }
          }
        }
      }
    }
  }

  .button-group {
    width: 915px;
    margin: 0 auto;
    text-align: center;

    > div {
      display: inline-block;
      font-size: 18px;
      padding: 6px 22px;
      border-radius: 6px;

      &:nth-child(1) {
        color: #f3b815;
        border: 1px solid #f3b815;
        background: #fff6ef;
        margin-right: 139px;
      }

      &:nth-child(2) {
        color: rgba(250, 83, 57, 1);
        border: 1px solid rgba(250, 83, 57, 1);
        background: rgba(255, 239, 239, 1);
      }
    }
  }
}
</style>
